<template>
<div>

  <div class="front">
    <div>
      <div style="margin-top: 10px">
        <el-button type="primary"
                   style="margin-left: 1%"
                   @click="
                   addnew(),
          dialogFormVisible3=true "
        >新增房主</el-button>

        <el-button>
          <download-excel
            style="color: black"
            class = "export-excel-wrapper"
            :data = "tableData"
            :fields = "json_fields"
            name = "房主信息.xls">
            <el-button type="primary">导出EXCEL</el-button>
          </download-excel>
        </el-button>

        <el-button type="danger"
                   style="margin-left: 1%"
                   @click="
                   loginOut()
           "
        >退出登录</el-button>
      </div>

      <div>
        <el-dialog title="新增房主"  :visible.sync="dialogFormVisible3">
          <el-form :model="form">
            <el-form-item label="姓名" :label-width="formLabelWidth">
              <el-input v-model="form.housename" ></el-input>
            </el-form-item>
          </el-form>
          <el-form :model="form">
            <el-form-item label="手机号" :label-width="formLabelWidth">
              <el-input v-model="form.hphone" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <el-form :model="form">
            <el-form-item label="地址" :label-width="formLabelWidth">
              <el-input v-model="form.address" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <el-form :model="form">
            <el-form-item label="空闲时间" :label-width="formLabelWidth">
              <el-input v-model="form.freetime" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <el-form :model="form">
            <el-form-item label="密码" :label-width="formLabelWidth">
              <el-input v-model="form.password" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible3= false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible3=false,add()">确 定</el-button>
          </div>
        </el-dialog>
      </div>


      <div style="margin-top: 10px">
        <el-table
          :data="tableData"
          style="width: 100%;margin-left: 1%;margin-right: 1%"
          :row-class-name="tableRowClassName">
          <el-table-column
            prop="hphone"
            label="电话号码"
            width="180px">
          </el-table-column>
          <el-table-column
            prop="housename"
            label="姓名"
            width="150px"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址"
            width="230px">
          </el-table-column>
          <el-table-column
            prop="password"
            label="密码"
            width="230px">
          </el-table-column>
          <el-table-column
            prop="freetime"
            label="空闲时间"
            width="200px">
          </el-table-column>
          <el-table-column
            prop="operation"
            label="操作"
            align="center"
            width="250px"
          >
            <template slot-scope="scope">
              <el-button
                type="primary"
                @click="editInFo(scope.row),
                dialogFormVisible = true"
              >编辑</el-button
              >
              <el-button
                type="danger"
                @click="deleData(scope.row)"
              >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div>
        <el-dialog title="编辑房主信息"  :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="姓名" :label-width="formLabelWidth">
              <el-input v-model="form.housename" ></el-input>
            </el-form-item>
          </el-form>
          <el-form :model="form">
            <el-form-item label="初始手机号" :label-width="formLabelWidth">
              <el-input v-model="form.oldphone" :disabled="true" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <el-form :model="form">
            <el-form-item label="手机号" :label-width="formLabelWidth">
              <el-input v-model="form.hphone" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <el-form :model="form">
            <el-form-item label="地址" :label-width="formLabelWidth">
              <el-input v-model="form.address" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <el-form :model="form">
            <el-form-item label="空闲时间" :label-width="formLabelWidth">
              <el-input v-model="form.freetime" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible= false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible=false,submitPass()">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</div>
</template>

<script>
  import axios from 'axios'

    export default {
      name: "managerMain",
      data() {
        return {
          json_fields: {
            "姓名": "housename",    //常规字段
            "手机号": "hphone", //支持嵌套属性
           "地址":"address",
            "空闲时间":"freetime",
            "密码":"password",
          },
          json_meta: [
            [
              {
                " key ": " charset ",
                " value ": " utf- 8 "
              }
            ]
          ],
          dialogTableVisible: false,
          dialogFormVisible: false,
          dialogFormVisible2:false,
          dialogFormVisible3:false,
          tableData: [],
          form: {
            housename:'',
            hphone:'',
            address:'',
            freetime:'',
            password:'',
            oldphone:'',
          },
          formLabelWidth: '120px',
        }
    },
      created() {
        this.tablePrint();
      },
      mounted() {
        document.body.style.backgroundColor="#FFFFCC";
      },
      methods: {
        loginOut(){
          this.$router.replace({ path: "/" });
        },
        addnew(){
            this.form.hphone='',
            this.form.password='',
            this.form.address='',
            this.form.housename='',
            this.form.oldphone='',
            this.form.freetime=''
        },
        exportData(){
          console.log(this.tableData)
        },
        add(){
            let pastData=this.$qs.stringify({
              name:this.form.housename,
              phone:this.form.hphone,
              address:this.form.address,
              freetime:this.form.freetime,
              password:this.form.password
            })
          axios.post('/manager/add',pastData).then(res=>{
              this.form.hphone='',
              this.form.password='',
              this.form.address='',
              this.form.housename='',
              this.form.oldphone='',
              this.form.freetime=''
            if (res.status===200){
              this.tablePrint();
            }
          })
        },
        deleData(row){
          let postData=this.$qs.stringify({
            phone:row.hphone
          })
          axios.post('/manager/delete',postData).then(res=>{
            if (res.status===200){
              this.$message.error('删除成功');
              this.tablePrint();
            }
          })
        },
        submitPass(){
            let postData=this.$qs.stringify({
              oldphone:this.form.oldphone,
              newphone:this.form.hphone,
              address:this.form.address,
              freetime:this.form.freetime,
              password:this.form.password,
              housename:this.form.housename
            })
          axios.post('/manager/updata',postData).then(res=>{
              this.form.hphone='',
              this.form.password='',
              this.form.address='',
              this.form.housename='',
              this.form.oldphone='',
              this.form.freetime=''
                if (res.status===200){
                  this.tablePrint();
                }

          })
        },
        editInFo(row){
          this.form.hphone=row.hphone,
          this.form.password=row.password,
          this.form.address=row.address,
          this.form.housename=row.housename,
          this.form.oldphone=row.hphone,
          this.form.freetime=row.freetime
     },
        tableRowClassName({row, rowIndex}) {
          if (rowIndex === 1) {
            return 'warning-row';
          } else if (rowIndex === 3) {
            return 'success-row';
          }
          return '';
        },
        tablePrint(){
          this.axios.post('/manager/list').then(res=>{
              console.log(res.data)
            this.tableData=res.data
          })
        },
      },
      watch:{
        '$route': 'tablePrint'
      }
    }
</script>

<style scoped>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
  .background{
    /*width:100%;*/
    /*height:100%;  !**宽高100%是为了图片铺满屏幕 *!*/
    /*z-index:-1;*/
    /*position: absolute;*/
  }

  .front{
    /*z-index:1;*/
    /*position: absolute;*/
  }
</style>
